<template>
	<el-form ref="ruleFormRef" :model="formInline" :rules="formRules" label-width="auto" label-position="top"
		v-loading="isLoading">
		<el-row :gutter="30">
			<re-col :value='24' :xs='24' :sm='24'>
				<el-form-item :label='titles?.parentId' prop='parentId'>
					<system-select v-model.trim='formInline.parentId' clearable :placeholder='prompt?.parentId'
						:style="{ width: '100%' }" @clear="formInline.productIds = null; tableData = null"
						@blur="formValidateField(ruleFormRef, 'parentId')" />
				</el-form-item>
			</re-col>
			<re-col :value='24' :xs='24' :sm='24'>
				<el-form-item :label='titles?.systematicName' prop='systematicName'>
					<el-input :maxlength="30" :show-word-limit="true" v-model.trim='formInline.systematicName' clearable
						:placeholder='prompt?.systematicName' />
				</el-form-item>
			</re-col>
			<re-col :value='24' :xs='24' :sm='24'>
				<el-form-item :label='titles?.logo' prop='logo'>
					<ReUpload v-model:files='formInline.logo' :limit="1" :key="isLoading + ''"></ReUpload>
				</el-form-item>
			</re-col>
			<re-col :value='24' :xs='24' :sm='24' v-if="formInline.parentId">
				<el-form-item :label='titles?.productIds' prop='productIds'>
					<pure-table :data="tableData" :columns="initPureTableConfig(roleTableConfig)" showOverflowTooltip border
						:isShowPag="false">
						<template #action="{ row }">
							<el-space>
								<sj-link custom-type="sred" :underline="false" @click="deletes(row)">删除</sj-link>
							</el-space>
						</template>
					</pure-table>
					<!-- <sj-button class="mt-2" type="primary" :icon="Plus" :style="{ width: '100%' }" @click="showProductids"
						v-show="!showProductIdsSelect">添加</sj-button> -->
					<el-table :data="[100]" :show-header="false" :border="true" :style="{ width: '100%' }"
						class="cursor-pointer" v-show="!showProductIdsSelect">
						<el-table-column label="">
							<template #default>
								<div @click="showProductids" class="text-center  py-[0px] ">
									添加
								</div>
							</template>
						</el-table-column>
					</el-table>
					<product-select v-if="showProductIdsSelect" clearable :placeholder='prompt?.productIds'
						:style="{ width: '100%' }" @change="addProductids"
					 />
				</el-form-item>
			</re-col>
			<re-col :value='24' :xs='24' :sm='24'>
				<el-form-item :label='titles?.systematicDesc' prop='systematicDesc'>
					<el-input :maxlength="100" :show-word-limit="true" v-model='formInline.systematicDesc' :autosize="{ minRows: 4 }" type="textarea" clearable
						:placeholder='prompt?.systematicDesc' />
				</el-form-item>
			</re-col>
		</el-row>
	</el-form>
</template>

<script setup lang="ts">
import {isNullOrEmpty,initPureTableConfig} from '@/utils/functions'
import { ref, reactive } from "vue";
import ReCol from "@/components/ReCol";
import systemSelect from "@/components/select/systemSelect/systemManageSelect.vue";
import productSelect from "@/components/select/productSelect/productSelect.vue";
import { ElMessage, type FormRules } from "element-plus";
import { titles, prompt } from './index';
import type { infoType } from '@/api/manage/system-management/system/index';
import ReUpload from '@/components/ReUpload/index.vue'
import { Plus, Delete } from '@element-plus/icons-vue';
import { getInfo } from '@/api/manage/product-management/product-type/index'
import { formValidateField } from '@/utils/functions'
type FormProps = {
	formInline: infoType,
	isLoading: boolean
}

const props = withDefaults(defineProps<FormProps>(), {
	formInline: () => ({} as infoType),
	isLoading: false
});

const formRules = reactive(<FormRules>{
	// id: [{ required: true, message: prompt?.id, trigger: 'blur' },],
	parentId: [{
		validator: (rule, value, callback) => {
			if (value && value == props.formInline.id) {
				callback(new Error('父级不能是自己'));
			} else {
				callback();
			}
		},
		trigger: "blur"
	}],
	systematicName: [{ required: true, message: prompt?.systematicName, trigger: 'blur' },],
	// systematicDesc: [{ required: true, message: prompt?.systematicDesc, trigger: 'blur' },],
	logo: [{ required: true, message: prompt?.logo, trigger: 'blur' },],
	productIds: [{ required: true, message: prompt?.productIds, trigger: 'blur' },],
});
const ruleFormRef = ref();
const showProductIdsSelect = ref(false)
const tableData = ref([])
const roleTableConfig = [
	{ prop: 'factoryName', label: '所属厂家名称' },
	{ prop: 'productName', label: '产品类型名称' },
	{ slot: 'action', label: titles.action, width: 100, fixed: 'right' },
]
const showProductids = () => {
	showProductIdsSelect.value = true
}
const addProductids = (e) => {
	if (e) {
		if (props.formInline?.productIds) {
			if (props.formInline.productIds.indexOf(e[1]) !== -1) {
				ElMessage.warning('该产品类型已添加')
				showProductIdsSelect.value = false
				return
			}
			props.formInline.productIds.push(e[1])
		} else {
			props.formInline.productIds = [e[1]]
		}
		getInfo({ id: e[1] }).then(res => {
			tableData.value.push({
				factoryName: res.result.factoryName,
				productName: res.result.productName,
				id: e[1]
			})
		}).catch(err => {
			console.log(err)
		})
		showProductIdsSelect.value = false
	}
}
const deletes = (row) => {
	tableData.value.splice(tableData.value.indexOf(row), 1);
	props.formInline.productIds.splice(props.formInline.productIds.indexOf(row.id), 1);
}
function initTableData() {
	if (props.formInline.productIds) {
		props.formInline.productIds.forEach(item => {
			getInfo({ id: item }).then(res => {
				tableData.value.push({
					factoryName: res.result.factoryName,
					productName: res.result.productName,
					id: item
				})
			}).catch(err => {
				console.log(err)
			})
		})
	}
}
function getRef() {
	return ruleFormRef.value;
}

defineExpose({ getRef, initTableData });
</script>
